<template>

  <div id="main"  style="width:800px;height:600px;" ></div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'consumers1',
    props:{
      chartData:{
        type:Array,
        default:() =>[]
      }
    },mounted() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      setTimeout(function () {

        option = {
          title: {

            text: '菜鸟使用统计',

          },
          legend: {
            bottom:4
          },
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['90后',  53.4,56.8,60.2,64.8,74.7, 85.1],
              ['00后', 51.1, 51.4, 53.5, 53.8, 60.8, 68.7],
              ['80后', 20.1,38.1,35.9,45.1,43.9,60.8,64.8],
              ['70后', 10.9,11.5,11.8,13.9,15.9,18.1,20.1]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {focus: 'data'},
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          var xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);

      });

      option && myChart.setOption(option);

    }
  }
  </script>


